<template>
 <div class="flowable-article">
   <div class="articles">
     <div class="article" @click="goto('https://item.jd.com/10029954269307.html')" style="background-color: #5cb85c;color: white">
       <img src="../../assets/7.jpg" style="width: 256px;height: 256px">
       <div class="title">Activiti实战</div>
     </div>
     <div class="article" @click="goto('https://github.com/henryyan/kft-activiti-demo')" style="background-color: #5cb85c;color: white">
       <img src="../../assets/activiti.png" style="width: 256px;height: 256px">
       <div class="title">Activiti布道者</div>
     </div>
     <div class="article" v-for="i in 3" :key="i" style="visibility: hidden"></div>
   </div>
   <div class="articles">
     <div class="article" v-for="(item, index) in data" :key="index" @click="goto(item.url)">
       <img :src="item.img" style="width: 256px;height: 256px">
       <div class="title">{{item.name}}</div>
     </div>
   </div>
 </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "Article",
  setup() {
    const state = reactive({
      data: [{
        img: require('../../assets/flowable.png'),
        url: 'https://kimguo.blog.csdn.net/article/details/120996394',
        name: 'Springboot集成FLOWABLE'
      }, {
        img: require('../../assets/flowable.png'),
        url: 'https://kimguo.blog.csdn.net/article/details/119574279',
        name: 'Springboot集成Flowable之 选择人员的界面自定义开发'
      },  {
        img: require('../../assets/flowable.png'),
        url: 'https://kimguo.blog.csdn.net/article/details/119575042',
        name: 'Springboot集成FLOWABLE之 流程节点动态显示审批人信息'
      }, {
        img: require('../../assets/flowable.png'),
        url: 'https://kimguo.blog.csdn.net/article/details/122381438',
        name: 'Springboot集成FLOWABLE之流程驳回'
      }, {
        img: require('../../assets/flowable.png'),
        url: 'https://kimguo.blog.csdn.net/article/details/122515698',
        name: 'Springboot集成FLOWABLE之会签'
      }]
    })
    const goto = (url) => {
      window.open(url);
    }
    return {
      ...toRefs(state),
      goto
    }
  }
}
</script>

<style scoped lang="less">
.flowable-article {
  height: 100%;
  .info {
    font-size: 2rem;
    font-weight: 500;
    line-height: 3rem;
    padding-top: .2rem;
  }
  .articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 1rem;
    .article {
      margin-top: 1rem;
      cursor: pointer;
      padding: 1rem;
      text-align: center;
      box-shadow: -10px 0 10px #F5F5F5, /*左边阴影*/ 10px 0 10px #F5F5F5, /*右边阴影*/
        0 -10px 10px #F5F5F5, /*顶部阴影*/ 0 10px 10px #F5F5F5;
      font-size: 1.5rem;
      width: 310px;
      & > .title {
        padding-top: 1rem;
        line-height: 2rem;
      }
      &:hover {
        color: #42b983;
        box-shadow: -10px 0 10px #5cb85c, /*左边阴影*/ 10px 0 10px #5cb85c, /*右边阴影*/
          0 -10px 10px #5cb85c, /*顶部阴影*/ 0 10px 10px #5cb85c;
      }
    }
  }
}
</style>
